<!--<a href="#/layui/webManage" class="layui-btn layui-btn-xs layui-btn-primary" style="margin: 20px 0 0 30px;">
  <i class="layui-icon">&#xe65c;</i>
</a>-->

<form action="" class="layui-form">
	<div class="layui-fluid">
		<div class="layui-card">
			<!--<div class="layui-container">-->
				<div class="layui-row">
			    <div class="layui-col-md12">
			    	
			    	<div class="layui-card-header">
			    		<h2>
			    		<a href="#/layui/webManage" class="layui-btn layui-btn-xs layui-btn-primary" style="margin: -0px 0 0 0;border: none;background-color: rgba(0,0,0,0);">
							  <i class="layui-icon">&#xe65c;</i>
							</a>
			      	官网信息
			      	</h2>
			      </div>
			      
			      <div class="layui-card-body">
			      	<div class="layui-form-item">
		      			<div class="layui-form-label">轮播图：<span class="haveTo">*</span></div>
		      			<div class="layui-input-block">
		      				<table class="layui-table" lay-size="lg" lay-skin="nob">
					      				<tbody>
					      					<tr>
					      						<td>
					      							
					      							
					      							<table class="layui-table" lay-size="lg" lay-skin="nob">
									      				<tbody>
									      					<tr>
									      						<td class="lunbo_td" lay-filter="scroll">
									      						</td>
									      						<!--<td>
																	<button class="layui-btn layui-btn-danger cover_delPic">删除</button>
									      						</td>-->
									      					</tr>
									      					<tr>
									      						<td>
									      							<input type="file" class="lunbo_input" style="display: none;" onchange="uploadPhoto2(this)">   
									      						
									      							<button type="button" class="layui-btn" id="test1" onclick="coverlunbo()">
																		  <i class="layui-icon">&#xe67c;</i>添加图片
																		</button>
																	<button class="layui-btn layui-btn-danger lunboDel" type="button">删除</button> 
									      						</td>
									      					</tr>
									      				</tbody>
									      			</table>
									      			
									      			
					      						</td>
					      						<td><span class="haveTo">*</span></td>
					      					</tr>
					      				</tbody>
					      			</table>
		      			</div>
		      		</div>
		      		<div class="layui-form-item">
		      			<div class="layui-form-label">公司介绍：<span class="haveTo">*</span></div>
		      			<div class="layui-input-block">
		      				<textarea name="" class="layui-textarea comIntro_ta" required  lay-verify="required" ></textarea>
		      			</div>
		      		</div> 	
		      		<div class="layui-form-item">
		      			<div class="layui-form-label">产品介绍：<span class="haveTo">*</span></div>
		      			<div class="layui-input-block">
		      				<textarea name="" class="layui-textarea prodIntro_ta" required  lay-verify="required" ></textarea>
		      			</div>
		      		</div>
		      		<div class="layui-form-item">
		      			<div class="layui-form-label">荣誉资质：<span class="haveTo">*</span></div>
		      			<div class="layui-input-block">
		      				<table class="layui-table" lay-size="lg" lay-skin="nob">
					      				<tbody>
					      					<tr>
					      						<td>
					      							
					      							
					      							<table class="layui-table" lay-size="lg" lay-skin="nob">
									      				<tbody>
									      					<tr>
									      						<td class="honor_td" lay-filter="ronngyu">
									      						</td>
									      						<!--<td>
																	<button class="layui-btn layui-btn-danger cover_delPic">删除</button>
									      						</td>-->
									      					</tr>
									      					<tr>
									      						<td>
									      							<input type="file" class="honor_input" style="display: none;" onchange="uploadPhoto3(this)">   
									      						
									      							<button type="button" class="layui-btn" id="test1" onclick="coverhonor()">
																		  <i class="layui-icon">&#xe67c;</i>添加图片
																		</button>
																	<button class="layui-btn layui-btn-danger honorDel" type="button">删除</button> 
									      						</td>
									      					</tr>
									      				</tbody>
									      			</table>
									      			
									      			
					      						</td>
					      						<td><span class="haveTo">*</span></td>
					      					</tr>
					      				</tbody>
					      			</table>
		      			</div>
		      		</div>
		      		<div class="layui-form-item">
		      			<div class="layui-form-label">成功案例：<span class="haveTo">*</span></div>
		      			<div class="layui-input-block">
		      				<table class="layui-table" lay-size="lg" lay-skin="nob">
					      				<tbody>
					      					<tr>
					      						<td>
					      							
					      							
					      							<table class="layui-table" lay-size="lg" lay-skin="nob">
									      				<tbody>
									      					<tr>
									      						<td class="succeed_td" lay-filter="chenggong">
									      						</td>
									      						<!--<td>
																	<button class="layui-btn layui-btn-danger cover_delPic">删除</button>
									      						</td>-->
									      					</tr>
									      					<tr>
									      						<td>
									      							<input type="file" class="succeed_input" style="display: none;" onchange="uploadPhoto4(this)">   
									      						
									      							<button type="button" class="layui-btn" id="test1" onclick="coversucceed()">
																		  <i class="layui-icon">&#xe67c;</i>添加图片
																		</button>
																	<button class="layui-btn layui-btn-danger succeedDel" type="button">删除</button> 
									      						</td>
									      					</tr>
									      				</tbody>
									      			</table>
									      			
									      			
					      						</td>
					      						<td><span class="haveTo">*</span></td>
					      					</tr>
					      				</tbody>
					      			</table>
		      			</div>
		      		</div>
		      		<div class="layui-form-item">
		      			<div class="layui-form-label">是否上架：</div>
		      			<div class="layui-input-block">
		      				<select name="isPutaway" class="isPutaway" lay-verify="">
												  <option value="1">是</option>
												  <option value="0">否</option>
												</select> 
		      			</div>
		      		</div>
		      		<div class="layui-form-item">
		      			<div class="layui-form-label"></div>
		      			<div class="layui-input-block">
		      				<button class="layui-btn confirm" type="button">确定</button>
		      			</div>
		      		</div>
			      </div>
			      
			      
			      
			      	<!--<table class="layui-table" lay-size="lg" lay-skin="nob">
					      
					      <tbody>
					      	
					      	<tr class="scoll">
					      		<td class="small_td">轮播图：</td>
					      		<td>
					      			<table class="layui-table" lay-size="lg" lay-skin="nob">
					      				<tbody>
					      					<tr>
					      						<td>
					      							
					      							
					      							<table class="layui-table" lay-size="lg" lay-skin="nob">
									      				<tbody>
									      					<tr>
									      						<td class="lunbo_td" lay-filter="scroll">
									      						</td>
									      					</tr>
									      					<tr>
									      						<td>
									      							<input type="file" class="lunbo_input" style="display: none;" onchange="uploadPhoto2(this)">   
									      						
									      							<button type="button" class="layui-btn" id="test1" onclick="coverlunbo()">
																		  <i class="layui-icon">&#xe67c;</i>添加图片
																		</button>
																	<button class="layui-btn layui-btn-danger lunboDel" type="button">删除</button> 
									      						</td>
									      					</tr>
									      				</tbody>
									      			</table>
									      			
									      			
					      						</td>
					      						<td><span class="haveTo">*</span></td>
					      					</tr>
					      				</tbody>
					      			</table>
					      			
					      		</td>
					      		
					      	</tr>
					      	
					      	<tr>
					      		<td class="small_td">公司介绍：</td>
					      		<td class="">
					      			<table class="layui-table" lay-size="lg" lay-skin="nob">
					      				<tbody>
					      					<tr>
					      						<td>
					      							<div class="comIntro">
									      				<textarea name="" class="layui-textarea comIntro_ta" required  lay-verify="required" ></textarea>
									      			</div>
					      						</td>
					      						<td><span class="haveTo">*</span></td>
					      					</tr>
					      				</tbody>
					      			</table>
					      			
					      			
					      		</td>
					      			
					      	</tr>
					      	<tr>
					      		<td class="small_td">产品介绍：</td>
					      		<td class="">
					      			<table class="layui-table" lay-size="lg" lay-skin="nob">
					      				<tbody>
					      					<tr>
					      						<td>
					      							<div class="prodIntro">
									      				<textarea name="" class="layui-textarea prodIntro_ta" required  lay-verify="required" ></textarea>
									      			</div>
					      						</td>
					      						<td><span class="haveTo">*</span></td>
					      					</tr>
					      				</tbody>
					      			</table>
					      			
					      			
					      		</td>
					      		
					      	</tr>
					      	<tr class="honor">
					      		<td class="small_td">荣誉资质：</td>
					      		<td>
					      			<table class="layui-table" lay-size="lg" lay-skin="nob">
					      				<tbody>
					      					<tr>
					      						<td>
					      							
					      							
					      							<table class="layui-table" lay-size="lg" lay-skin="nob">
									      				<tbody>
									      					<tr>
									      						<td class="honor_td" lay-filter="ronngyu">
									      						</td>
									      					</tr>
									      					<tr>
									      						<td>
									      							<input type="file" class="honor_input" style="display: none;" onchange="uploadPhoto3(this)">   
									      						
									      							<button type="button" class="layui-btn" id="test1" onclick="coverhonor()">
																		  <i class="layui-icon">&#xe67c;</i>添加图片
																		</button>
																	<button class="layui-btn layui-btn-danger honorDel" type="button">删除</button> 
									      						</td>
									      					</tr>
									      				</tbody>
									      			</table>
									      			
									      			
					      						</td>
					      						<td><span class="haveTo">*</span></td>
					      					</tr>
					      				</tbody>
					      			</table>
					      			
					      		</td>
					      		
					      	</tr>
					      	<tr class="succeedCase">
					      		<td class="small_td">成功案例：</td>
					      		<td>
					      			<table class="layui-table" lay-size="lg" lay-skin="nob">
					      				<tbody>
					      					<tr>
					      						<td>
					      							
					      							
					      							<table class="layui-table" lay-size="lg" lay-skin="nob">
									      				<tbody>
									      					<tr>
									      						<td class="succeed_td" lay-filter="chenggong">
									      						</td>
									      					</tr>
									      					<tr>
									      						<td>
									      							<input type="file" class="succeed_input" style="display: none;" onchange="uploadPhoto4(this)">   
									      						
									      							<button type="button" class="layui-btn" id="test1" onclick="coversucceed()">
																		  <i class="layui-icon">&#xe67c;</i>添加图片
																		</button>
																	<button class="layui-btn layui-btn-danger succeedDel" type="button">删除</button> 
									      						</td>
									      					</tr>
									      				</tbody>
									      			</table>
									      			
									      			
					      						</td>
					      						<td><span class="haveTo">*</span></td>
					      					</tr>
					      				</tbody>
					      			</table>
					      			
					      		</td>
					      		
					      	</tr>
					      	
					      	<tr>
					      		<td class="small_td">是否上架：</td>
					      		<td>
					      			<select name="isPutaway" class="isPutaway" lay-verify="">
												  <option value="1">是</option>
												  <option value="0">否</option>
												</select> 
					      		</td>
					      	</tr>
						  </tbody>
					      	
				      </table>-->
			    <!--</div>
			    
			    <div class="layui-col-md10">
			    	<div class="addFHBtn">
						<button class="layui-btn confirm" type="button">确定</button>
					</div>
			    </div>-->
			    
			  </div>
			</div>
			
			
			
			
			</div>


		</div>
	</div>
</form>
<script>
//	let webName = document.querySelector(".webName");
	let webTel = document.querySelector(".webTel");
	let webAddr = document.querySelector(".webAddr");
	let comIntro_ta = document.querySelector(".comIntro_ta");
	let prodIntro_ta = document.querySelector(".prodIntro_ta");
	let isPutaway = document.querySelector(".isPutaway");
	let confirm = document.querySelector(".confirm");
	let lunboDel = document.querySelector(".lunboDel");
	let lunbo_td = document.querySelector(".lunbo_td");
	let honorDel = document.querySelector(".honorDel");
	let honor_td = document.querySelector(".honor_td");
	let succeedDel = document.querySelector(".succeedDel");
	let succeed_td = document.querySelector(".succeed_td");
	let lunboPhotos = [];
	let honorPhotos=[];
	let succeedPhotos=[];
	
	//	轮播图
	function coverlunbo(){
		$('.lunbo_input').click()
	}
	//荣誉
	function coverhonor(){
		$('.honor_input').click()
	}
	//成功
	function coversucceed(){
		$('.succeed_input').click()
	}
	
//	多图添加
//	删除按钮,修改delDeImg和prodDe_check
	lunboDel.addEventListener("click",function(){
		
			$.each($('input[name="lunbo_check"]:checked'),function(){
				lunboPhotos.splice(lunboPhotos.indexOf($(this).val()),1)
				console.log("$(this)",$(this).parent().remove())
			})
//			console.log(photos)
	})
	
	honorDel.addEventListener("click",function(){
		
			$.each($('input[name="honor_check"]:checked'),function(){
				honorPhotos.splice(honorPhotos.indexOf($(this).val()),1)
				console.log("$(this)",$(this).parent().remove())
			})
//			console.log(photos)
	})
	
	succeedDel.addEventListener("click",function(){
		
			$.each($('input[name="succeed_check"]:checked'),function(){
				succeedPhotos.splice(succeedPhotos.indexOf($(this).val()),1)
				console.log("$(this)",$(this).parent().remove())
			})
//			console.log(photos)
	})
//	每一个多图上传的方法都不一样,回调函数内容不一样
	function uploadPhoto2(file) {
    console.log(file.files[0])

    var data = new FormData();
    data.append("file", file.files[0]);
    

    $.ajax({
      url:DBHelper.host+'/api/ImgUpload?MemLoginId=admit&ImagesType=',
      type: 'POST',
      dataType: 'JSON',
      data: data,
      cache: false,
      processData: false,
      contentType: false,
      beforeSend: function(request) {
          request.setRequestHeader("Authorization", 'bearer ' + DBHelper.getToken());
          loadingImg()
      },
			success:function(res){
//				let fhImg = document.querySelector(".fhImg");
//				console.log(res.Url)
//				fhImg.setAttribute("src",res.Url)
//				photo = res.Url;
//				prodBg.setAttribute("src",res.Url)
				lunbo_td.innerHTML += `
				<div class="lunbo_check">
					<img src="${res.Url}" style="width: 100px;height: 100px;margin-bottom:20px;" />
					<input type="checkbox" name="lunbo_check" lay-skin="primary" value="${res.Url}">
				</div>
				
				`
				renderForm();
				lunboPhotos.push(res.Url);
				$('.loading').remove()
//					console.log(res)
				console.log(lunboPhotos)
			},
			error:function(res){
				$('.loading').remove()
			}
    })
  }
	
	function uploadPhoto3(file) {
    console.log(file.files[0])

    var data = new FormData();
    data.append("file", file.files[0]);
    

    $.ajax({
      url:DBHelper.host+'/api/ImgUpload?MemLoginId=admit&ImagesType=',
      type: 'POST',
      dataType: 'JSON',
      data: data,
      cache: false,
      processData: false,
      contentType: false,
      beforeSend: function(request) {
          request.setRequestHeader("Authorization", 'bearer ' + DBHelper.getToken());
          loadingImg()
      },
			success:function(res){
//				let fhImg = document.querySelector(".fhImg");
//				console.log(res.Url)
//				fhImg.setAttribute("src",res.Url)
//				photo = res.Url;
//				prodBg.setAttribute("src",res.Url)
				honor_td.innerHTML += `
				<div class="honor_check">
					<img src="${res.Url}" style="width: 100px;height: 100px;margin-bottom:20px;" />
					<input type="checkbox" name="honor_check" lay-skin="primary" value="${res.Url}">
				</div>
				
				`
				renderForm();
				honorPhotos.push(res.Url);
				$('.loading').remove()
//					console.log(res)
				console.log(honorPhotos)
			},
			error:function(res){
				$('.loading').remove()
			}
    })
  }
	
	function uploadPhoto4(file) {
    console.log(file.files[0])

    var data = new FormData();
    data.append("file", file.files[0]);
    

    $.ajax({
      url:DBHelper.host+'/api/ImgUpload?MemLoginId=admit&ImagesType=',
      type: 'POST',
      dataType: 'JSON',
      data: data,
      cache: false,
      processData: false,
      contentType: false,
      beforeSend: function(request) {
          request.setRequestHeader("Authorization", 'bearer ' + DBHelper.getToken());
          loadingImg()
      },
			success:function(res){
//				let fhImg = document.querySelector(".fhImg");
//				console.log(res.Url)
//				fhImg.setAttribute("src",res.Url)
//				photo = res.Url;
//				prodBg.setAttribute("src",res.Url)
				succeed_td.innerHTML += `
				<div class="succeed_check">
					<img src="${res.Url}" style="width: 100px;height: 100px;margin-bottom:20px;" />
					<input type="checkbox" name="succeed_check" lay-skin="primary" value="${res.Url}">
				</div>
				
				`
				renderForm();
				succeedPhotos.push(res.Url);
				$('.loading').remove()
//					console.log(res)
				console.log(succeedPhotos)
			},
			error:function(res){
				$('.loading').remove()
			}
    })
  }
//	将图片转换成json串
	function jointPic(arr){
		let sum = '';
		arr.forEach((el,index)=>{
			sum += el+"|"
		})
		sum = sum.substring(0,sum.length-1)
		return sum;
	}
	
//	多图添加结束
	
	
	layui.use(['jquery', 'mockjs', 'table', 'sidebar', 'form','route'], function () {
		var $ = layui.jquery,
      layer = layui.layer,
      table = layui.table,
      sidebar = layui.sidebar,
      route = layui.route,
      params = route.params(),
      form = layui.form;
      
      var _obj = {
			  "Guid": "00000000-0000-0000-0000-000000000000",
			  "MemLoginId": "",
			  "CoverImage": "",
			  "Presentation": "",
			  "ProductPresentation": "",
			  "HonorImages": "",
			  "CaseImages": "",
			  "CreateUser": "",
			  "CreateTime": "",
			  "ModifyUser": "",
			  "ModifyTime": "",
			  "IsAudit":0
      }
      
  		renderForm();
  		
  		if(params) {
  			DBHelper.Get("Admin_Xn_Website?id="+params.id, function(data){
							console.log("本页信息",data)
							_obj = data;
//							memberId.value = data.Guid;
//							memberName.value = data.RealName;
//							memberPhone.value = data.Mobile;
							_obj.MemLoginId = data.MemLoginId;
							
							_obj.Guid = data.Guid;
//							webName.innerText = data.MemLoginId;
							comIntro_ta.value = data.Presentation;
							prodIntro_ta.value = data.ProductPresentation;
							$(".isPutaway").find("option[value='"+data.IsAudit+"']").prop("selected",true);
							
//    		多图下载到本地,修改DetailsImage,prodDe_check,prodDe_td
      		if(data.CoverImage){
      			lunboPhotos = data.CoverImage.split("|");
	      		lunboPhotos.forEach((el,index)=>{
	      			lunbo_td.innerHTML += `
							<div class="lunbo_check">
								<img src="${el}" style="width: 100px;height: 100px;margin-bottom:20px;" />
								<input type="checkbox" name="lunbo_check" lay-skin="primary" value="${el}">
							</div>
							
							`
	      		})
	      		renderForm();
//	      		console.log("lunboPhotos",lunboPhotos)
      		}
//    		多图下载到本地结束
//    		多图下载到本地,修改DetailsImage,prodDe_check,prodDe_td
      		if(data.HonorImages){
      			honorPhotos = data.HonorImages.split("|");
	      		honorPhotos.forEach((el,index)=>{
	      			honor_td.innerHTML += `
							<div class="honor_check">
								<img src="${el}" style="width: 100px;height: 100px;margin-bottom:20px;" />
								<input type="checkbox" name="honor_check" lay-skin="primary" value="${el}">
							</div>
							
							`
	      		})
	      		renderForm();
//	      		console.log("honorPhotos",honorPhotos)
      		}
//    		多图下载到本地结束
//    		多图下载到本地,修改DetailsImage,prodDe_check,prodDe_td
      		if(data.CaseImages){
      			succeedPhotos = data.CaseImages.split("|");
	      		succeedPhotos.forEach((el,index)=>{
	      			succeed_td.innerHTML += `
							<div class="honor_check">
								<img src="${el}" style="width: 100px;height: 100px;margin-bottom:20px;" />
								<input type="checkbox" name="succeed_check" lay-skin="primary" value="${el}">
							</div>
							
							`
	      		})
	      		renderForm();
//	      		console.log("succeedPhotos",succeedPhotos)
      		}
//    		多图下载到本地结束
							
							
							
						}, function(data){
							console.log(data)
						})
  		}
  		
  		function _confirm (){
//						_obj.Guid = score.value;
						_obj.Presentation = comIntro_ta.value;
						_obj.ProductPresentation = prodIntro_ta.value;
						_obj.CoverImage = jointPic(lunboPhotos);
						_obj.CaseImages = jointPic(succeedPhotos);
						_obj.HonorImages = jointPic(honorPhotos);
						_obj.IsAudit = $(".isPutaway").find("option:selected").val();
					
						if(params == null) {
							
							 
//							_obj.CreateTime = new Date();
							DBHelper.Post("Admin_Xn_Website", _obj, function(data) {
								console.log(data)
								let index = layer.alert("操作成功",function(){
										window.location.href="#/layui/webManage";
										layer.close(index)
								})
//								window.location.href="#/layui/webManage";
							}, function(data) {
								console.log(data)
							});
						} else {
							console.log("params.id",params.id)
							console.log("_obj",_obj)
//							_obj.ModifyTime = new Date();
							DBHelper.Put("Admin_Xn_Website?id=" + params.id, _obj, function(data) {
								let index = layer.alert("操作成功",function(){
										window.location.href="#/layui/webManage";
										layer.close(index)
								})
//								window.location.href="#/layui/webManage";
								
								console.log(data)
							}, function(data) {
								console.log(data)
							})
						}
					}
			


			confirm.addEventListener("click",_confirm)
 	})
	
	
	
	function renderForm(){	
			  layui.use('form', function(){
			   var form = layui.form;//高版本建议把括号去掉，有的低版本，需要加()
			   form.render();
			  });
  	}
	
	
	
	
</script>


	<style scoped>
		.small_td{
			width: 100px;
			text-align: right;
		}
		.lunbo_check{
			width: 100px;
			padding: 12px;
			text-align: center;
			display: inline-block;
			/*border: 1px solid black;*/
		}
		.honor_check{
			width: 100px;
			padding: 12px;
			text-align: center;
			display: inline-block;
			/*border: 1px solid black;*/
		}
		.succeed_check{
			width: 100px;
			padding: 12px;
			text-align: center;
			display: inline-block;
			/*border: 1px solid black;*/
		}
		.haveTo{
			color: red;
		}
		.prodInfo{
			position: relative;
		}
		.fr{
			float: right;
		}
		.fl{
			float: left;
		}
		.clearfix::after{
			content: "";
			display: block;
			width: 100%;
			height: 0;
			clear: both;
		}
		.prodIntro{
			position: relative;
		}
		.limit{
			position: absolute;
			bottom: 5px;
			right: 10px;
		}
      	.title{
      		margin-left: 30px;
      		margin-top: 30px;
      	}
      	.checkBtn{
      		border-radius: 5px;
      		width: 100px;
      	}
      	.listBtns{
      		display: flex;
      		justify-content: space-between;
      		width: 100%;
      	}
      	.listBtn{
      		border-radius: 5px;
      	}
      	.addFHBtn{
      		text-align: center;
      		margin-top: 20px;
      		margin-bottom: 20px;
      	}
      	.addFHBtn button{
      		display: inline-block;
      		width: 300px;
      	}
      </style>
      
      


